<template>
  <div class="bg">
    <div class="login">
      <div class="avatar">
        <img src="../assets/logo.png" alt="">
      </div>
      <el-form class="content" ref="LoginFormRef" :rules="rules" :model="LoginFormRef">
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user-solid" v-model="LoginFormRef.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" type="password" v-model="LoginFormRef.password"></el-input>
          </el-form-item>
          <el-form-item class="button">
            <el-button type="primary" @click="submitLoginForm">登录</el-button>
            <el-button type="info" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
  </div>
</template>

<script>
import {reqLogin} from '../api/index'
  export default {
    created(){
          
    },
    data() {
      return {
        LoginFormRef: {
          username: 'admin',
          password:'123456'
        },
        rules: {
          username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      // 提交表单的同一验证
      submitLoginForm(){
        this.$refs.LoginFormRef.validate(async (valid) => {
          // 校验非空
          if (!valid) return false
          // 获取表单数据
          const {username, password} = this.LoginFormRef
          // 发送请求
          const result = await reqLogin(username, password)
          // 校验返回的响应结果
          if(result.meta.status === 200){
            // 提示登录成功
            this.$message.success('登录成功')
            // 保存后台的token
            window.sessionStorage.setItem('token',result.data.token)
            // 跳转到管理页面
            this.$router.replace('home')
          }else{
            return this.$message.error(result.meta.msg)
          }
        });
      },
      // 重置登录表单
      resetForm(formName) {
        console.log('resetForm',this)
        this.$refs.LoginFormRef.resetFields();
      }

    }
  }
</script>

<style lang="less" scoped>
  .bg{
    background-color: #2b4b6b;
    width: 100%;
    height: 100%;

    .login{
      width: 400px;
      height: 300px;
      background-color: #fff;
      border-radius: 5px;
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      .avatar{
        width: 130px;
        height: 130px;
        border-radius: 50%;
        border: 1px solid #ddd;
        padding: 8px;
        box-shadow: 0 0 20px #fff;
        position:absolute;
        left: 50%;
        transform: translate(-50%, -50%); 
        background-color: #fff;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background-color: #eee;
        } 
      }
    }

    .content{
      width: 100%;
      padding:20px;
      position: absolute;
      bottom: 0;
    }

    .button{
      text-align: right;
    }
  }
</style>

/** 

表单的数据绑定【用户名和密码绑定到表单上】
1. 先为el绑定:model="form"属性进行绑定form数据对象
<el-form class="content" :model="LoginFormRef"></el-form>
2.给每个表单项的文本输入框通过v-model属性绑定到form数据对象的具体属性中
<el-input prefix-icon="el-icon-user-solid" v-model="LoginFormRef.username"></el-input>
data(){
  return {
    LoginFormRef: {
          username: '',
          password:''
      },  
  }  
}  





表单的验证规则【单一校验】：
1.为el-form 通过属性绑定指定 :rule="rule" 验证对象
<el-form class="content" :model="LoginFormRef" :rules="rules"></el-form>
2.在data数据中定义校验对象，其中每个属性都是一个校验规则
data(){
  return {
        rules: {
          username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
        }
  }  
}     
3.为不同的表单item项通过prop来指定不同的验证规则【prop是加到item中，不是加到 input中】
<el-form-item prop="username"></el-form-item>





重置表单：
1.需要通过ref获取整个表单对象的实例对象
<el-form class="content" ref="LoginFormRef" :rules="rules" :model="LoginFormRef"></el-form>
2.直接使用resetFiled函数重置整个表单，对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
resetForm(formName) {
    console.log('resetForm',this)     this是当前的实例对象
} 




表单的预校验【对整个表单进行校验】
1.获取表单的引用对象

2.使用element提供的validate函数
Function(callback: Function(boolean, object))  boolean:true 为表单校验成功 false 为不成功


*/